<template>
	<view class="content">
		<view class="inner">
			<!-- 倒计时 -->
			<view class="count-time">
				<text class="text">{{ goodsInfo.isOpened === 1 || (goodsInfo.newPerson ===1 && groupInfo.status === 2) ? '已开团' : '开团倒计时' }}</text>
				<u-count-down v-if="goodsInfo.isOpened === 0 && groupInfo.status !== 2" :show-days="false" :timestamp="groupTime" color="#FF1A2E" separator-color="#FF1A2E" bg-color="#FFF9DE"></u-count-down>
			</view>
			
			<!-- 拼团商品 -->
			<view class="goods-item">
				<view class="top">
					<view class="img-box">
						<image class="image" :src="goodsInfo.pic"></image>
						<view class="group-number">{{ goodsInfo.groupUserNumber }}人团</view>
						<view class="new-person" v-if="goodsInfo.newPerson === 1">新人专享</view>
					</view>
					<view class="goods-content">
						<view class="header">
							<view class="goods-name">{{ goodsInfo.title }}</view>
							<view class="deserved-money">未拼中奖励{{ goodsInfo.deservedMoney }}元红包</view>
						</view>
						<view class="price">
							<view class="group-price">拼团价<text class="symbol">¥<text class="text">{{ goodsInfo.groupPrice }}</text></text></view>
							<view class="end-price">¥{{ goodsInfo.price }}</view>
						</view>
					</view>
				</view>
				<view class="bottom" v-if="token && (goodsInfo.isOpened === 1 || groupInfo.participated)">
					<template v-if="goodsInfo.isOpened === 1 || (goodsInfo.newPerson === 1 && groupInfo.status === 2)">
						<view class="title" v-if="groupInfo.participated === 1 && groupInfo.winning === 1">恭喜您，拼中商品</view>
						<view class="title" v-else-if="groupInfo.participated === 1 && groupInfo.winning === 0">恭喜您，获得{{ goodsInfo.deservedMoney }}元红包奖励</view>
						<image class="image" :src="userInfo.headImg"></image>
						<view class="footer">
							<text class="text">{{ userInfo.username }}</text>
							<view class="right" v-if="groupInfo.participated === 1 && groupInfo.winning === 1" @tap="toOrderList()">查看订单<u-icon name="arrow-right"></u-icon></view>
						</view>
					</template>
					<template v-else-if="groupInfo.participated">
						<view class="title">您正在参与拼团</view>
						<view class="desc">支付拼团金额</view>
						<view class="title">¥{{ goodsInfo.groupPrice }}</view>
						<view class="time">{{ groupInfo.participatedTime }}</view>
					</template>
				</view>
			</view>
			
			<!-- 拼团人员信息 -->
			<view class="group-info">
				<view class="main-title">
					<text class="text">拼团人员</text>
					<view class="line"></view>
				</view>
				<view class="date-list">
					<view class="empty" v-if="dateList.length === 0">暂无相关人员~</view>
					<template v-for="date in dateList">
						<view class="date">{{ date }}</view>
						<view class="date-item" v-for="(item, index) in userlist" v-if="item.purchaseTime === date">
							<view class="text">{{ item.time }}</view>
							<view class="text"> NO.{{ userlist.length - index }}</view>
							<view class="text">{{ item.username }}</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		
		<!-- 底部固定栏 -->
		<view class="footer-bar other">
			<view class="join-other" @tap="joinOther()" v-if="goodsInfo.isOpened === 1 || groupInfo.participated === 1"><u-icon name="arrow-left-double" color="#929292" size="34"></u-icon>参与其他拼团</view>
			<button class="btn join" @tap="joinGroup()" v-else>参加拼团</button>
			<view class="group-num" v-if="goodsInfo.isOpened === 0 && groupInfo.participated === 0 && goodsInfo.newPerson === 0">仅差{{ goodsInfo.groupUserNumber - goodsInfo.alreadyGroupUserNumber - goodsInfo.groupRobotUserNumber }}人成团</view>
			<view class="group-num" v-if="goodsInfo.isOpened === 0 && groupInfo.participated === 0 && goodsInfo.newPerson === 1">仅差{{ goodsInfo.groupUserNumber - goodsInfo.groupRobotUserNumber }}人成团</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import moment from '@/utils/packges/moment';
	export default {
		name: 'groupdetail',
		data() {
			return {
				options: {},
				groupTime: 0,
				groupType: 1, // 0 未开始 1 已开始
				goodsInfo: {},
				groupInfo: {},
				loading: false,
				dateList: [],
				userlist: [],
				token: null
			}
		},
		onLoad(options) {
			this.options = options;
		},
		onShow() {
			this.initPage();

			if (uni.getStorageSync('token')) {
				this.token = uni.getStorageSync('token');
			} else {
				this.token = null;
			}

			// #ifdef MP-WEIXIN
			uni.reportAnalytics('enter_pintuanxq');
			// #endif
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			// 初始化页面
			initPage() {
				uni.showLoading({
					title: '加载中...'
				})
				// 获取商品详情
				this.$service.shopping.goods.info({
					id: this.options.gid
				}).then(res => {
					this.goodsInfo = res;

					// 计算剩余时长
					if (parseInt(this.goodsInfo.starttime / 1000) - parseInt(moment().format('X')) > 0) {
						this.groupTime = parseInt(this.goodsInfo.startTime / 1000) - parseInt(moment().format('X'));
						this.groupType = 0;
					} else {
						this.groupTime = parseInt(this.goodsInfo.endTime / 1000) - parseInt(moment().format('X'));
						this.groupType = 1;
					}
					uni.hideLoading();
				});
				
				// 获取参团人员详情
				this.$service.order.combination.usersInfo({
					combinationId: this.options.gid
				}).then(res => {
					this.groupInfo = res;
					
					this.dateList = [];
					this.userlist = [];
					if (this.goodsInfo.newPerson === 1 && res.participated === 1 && res.status === 2) {
						this.userlist.push({
							purchaseTime: moment(this.groupInfo.participatedTime).add(5, 'minutes').format('MM-DD'),
							time: moment(this.groupInfo.participatedTime).add(5, 'minutes').format('HH:mm'),
							createTime: this.groupInfo.participatedTime,
							headImg: this.userInfo.headImg,
							username: 'kete'
						})
					}
					if (this.goodsInfo.newPerson === 1 && res.participated === 1) {
						this.userlist.push({
							purchaseTime: moment(this.groupInfo.participatedTime).format('MM-DD'),
							time: moment(this.groupInfo.participatedTime).format('HH:mm'),
							createTime: this.groupInfo.participatedTime,
							headImg: this.userInfo.headImg,
							username: this.userInfo.username
						})
					}
					res.userlist.forEach((item) => {
					    let date = moment(item.createTime).format('MM-DD');
					    item.purchaseTime = date
					    item.time = moment(item.createTime).format('HH:mm');
					    if (this.dateList.length === 0) {
					        this.dateList.push(date)
					    } else {
					        for (let i=0; i<this.dateList.length; i++) {
					            if (this.dateList[i] !== date){
					                this.dateList.push(date);
					            }
					        }
					    }
					    // 日期去重
					    this.dateList = Array.from(new Set(this.dateList));
					    this.userlist.push(item);
					})
				});
			},
			// 查看订单列表
			toOrderList() {
				uni.navigateTo({
					url: '/pages/order/list'
				});
			},
			// 参加拼团
			joinGroup() {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/sign/login?redirectUrl=navigateBack'
					});
					return false;
				}
				uni.navigateTo({
					url: '/pages/order/settlement?gid=' + this.options.gid
				});
				
				// #ifdef MP-WEIXIN
				uni.reportAnalytics('click_canyupt_pt');
				// #endif
			},
			// 参与其他拼团
			joinOther() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 90vh;
		padding-bottom: 120rpx;
		background: linear-gradient(to bottom, $main-color 6%, #F6F7FA 28%, #F6F7FA 100%);
		.inner {
			padding: 0 20rpx;
			.count-time {
				font-size: 28rpx;
				padding: 28rpx 0;
				color: #333333;
				@include flexBox(center, center);
				.text {
					font-weight: 600;
				}
				/deep/.u-countdown {
					margin-left: 10rpx;
				}
			}
			.goods-item {
				width: 100%;
				box-sizing: border-box;
				background: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				padding: 20rpx;
				.top {
					@include flexBox(center, flex-start);
					.img-box {
						width: 224rpx;
						height: 224rpx;
						position: relative;
						margin-right: 20rpx;
						border-radius: 16rpx;
						overflow: hidden;
						.image {
							position: absolute;
							width: 100%;
							height: 100%;
						}
						.group-number {
							position: absolute;
							background: $main-color;
							bottom: 0;
							left: 0;
							padding: 4rpx 12rpx;
							border-radius: 0 16rpx 0 16rpx;
							color: #333333;
							font-size: 26rpx;
						}
						.new-person {
							position: absolute;
							background: $main-color-text;
							bottom: 0;
							left: 0;
							padding: 4rpx 12rpx;
							border-radius: 0 16rpx 0 16rpx;
							color: #fff;
							font-size: 26rpx;
						}
					}
					.goods-content {
						flex: 1;
						overflow: auto;
						height: 224rpx;
						@include flexBox(space-between, flex-start, column);
						.header {
							.goods-name {
								font-size: 28rpx;
								color: #333333;
								margin-bottom: 20rpx;
								@include ellipsis(2);
							}
							.deserved-money {
								background: #FFF0F2;
								color: $main-color-text;
								padding: 6rpx 22rpx;
								border-radius: 50rpx;
								font-size: 26rpx;
							}
						}
						.price {
							color: #9A9A9A;
							@include flexBox(flex-start, flex-end);
							.group-price {
								font-size: 24rpx;
								.symbol {
									font-size: 28rpx;
									color: $main-color-text;
									.text {
										font-size: 38rpx;
										margin-right: 16rpx;
									}
								}
							}
							.end-price {
								color: #9A9A9A;
								font-size: 22rpx;
								text-decoration: line-through;
							}
						}
					}
				}
				.bottom {
					margin-top: 40rpx;
					padding-top: 20rpx;
					border-top: 2rpx dashed #E8E8E8;
					@include flexBox(center, center, column);
					.title {
						font-size: 36rpx;
						color: $main-color-text;
						font-weight: 600;
					}
					.image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						margin: 22rpx 0;
					}
					.desc {
						color: #2B2C2E;
						margin: 10rpx 0;
						font-size: 28rpx;
					}
					.time {
						color: #9A9A9A;
						margin-top: 10rpx;
					}
					.footer {
						width: 100%;
						position: relative;
						@include flexBox(center, center);
						.text {
							font-size: 28rpx;
							color: #2B2C2E;
							font-weight: 600;
						}
						.right {
							position: absolute;
							right: 0;
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
			.group-info {
				background: #fff;
				margin-top: 20rpx;
				border-radius: 16rpx;
				.main-title {
					padding: 20rpx 0;
					@include flexBox(center, center, column);
					.text {
						color: #2B2C2E;
						font-size: 32rpx;
						font-weight: 600;
						z-index: 2;
					}
					.line {
						background: $main-color;
						width: 128rpx;
						height: 16rpx;
						border-radius: 50rpx;
						margin-top: -16rpx;
						z-index: 1;
					}
				}
				.date-list {
					color: #2B2C2E;
					font-size: 28rpx;
					.date {
						background: #FFF9DE;
						text-align: center;
						padding: 8rpx 0;
						font-weight: 600;
					}
					.empty {
						text-align: center;
						padding-bottom: 20rpx;
						color: #999999;
					}
					.date-item {
						padding: 24rpx 52rpx;
						@include flexBox(space-between, center)
						.text {
							width: 33%;
						}
					}
				}
			}
		}
		.footer-bar {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			background: #fff;
			padding: 10rpx 24rpx;
			@include flexBox(center);
			&.other {
				box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.16);
			}
			.btn {
				width: 100%;
				border-radius: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
				&::after {
					border: none;
				}
				&.join {
					background: $main-color;
					color: #333333;
				}
			}
			.group-num {
				background: $main-color-text;
				position: fixed;
				bottom: 64rpx;
				font-size: 24rpx;
				left: 50%;
				margin-left: 64rpx;
				color: #fff;
				padding: 4rpx 12rpx;
				border-radius: 50rpx 50rpx 50rpx 0;
			}
			.join-other {
				font-size: 32rpx;
				color: #929292;
				/deep/.u-icon {
					transform: rotate(90deg);
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
